Storefront product grid and product details #1215
Merged
+28,894
−10,633
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add ProductGrid and ProductCard components for displaying SKU groups - Add Badge and Card UI components - Update GraphQL queries to fetch SKU groups with mediaObjects - Display product images from mediaObjects (IMAGE type) - Add formatCurrency utility function - Create example store page in Next.js app - Add providers setup for React Query Amp-Thread-ID: https://ampcode.com/threads/T-65ac7bb2-a629-4360-a457-dddb0eb691c8 Co-authored-by: Amp <amp@ampcode.com>
…refront-product-grid # Conflicts: # examples/nextjs/app/checkout.tsx # examples/nextjs/app/providers.tsx # examples/nextjs/package.json # packages/react/package.json # packages/react/src/godaddy-provider.tsx # packages/react/src/lib/godaddy/godaddy.ts # packages/react/src/lib/godaddy/graphql-env.ts # packages/react/src/lib/utils.ts # pnpm-lock.yaml
🦋 Changeset detectedLatest commit: 69b0029 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
packages/react/src/components/checkout/form/checkout-form-container.tsx
Outdated
Show resolved
Hide resolved
| matchedSkus.length === 1 ? matchedSkus[0]?.node?.id : null; | ||
|
|
||
| // Query individual SKU details when exactly one SKU matches | ||
| const { data: individualSkuData, isLoading: isSkuLoading } = useQuery({ |
Contributor
There was a problem hiding this comment.
We won't need this once the proper filterig is in place.
Contributor
Author
There was a problem hiding this comment.
I still think we need an individually query? or can we grab all of the data we need in the skus query as well? do we want to do that? since we'll be grabbing inventory/prices/media/etc?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Add Storefront Components with Product Grid, Cart, and GraphQL Schema Refactoring
Summary
This PR introduces a complete storefront solution for GoDaddy Commerce, including product browsing, product details, and cart functionality. It also refactors the GraphQL schema organization to
namespace different API endpoints (Catalog Storefront, Checkout, and Orders Storefront).
Changes
🎨 New Storefront Components
Added a comprehensive set of React components for building storefronts:
Files:
🧩 New UI Components
Added reusable shadcn-style UI components:
Files:
🔄 GraphQL Schema Refactoring
Reorganized GraphQL schemas into separate namespaced files for better maintainability:
Files:
🔌 Provider Enhancements
Extended GoDaddyProvider with storefront context:
Files:
📦 Example Implementation
Added complete Next.js example demonstrating storefront features:
Files:
🛠️ Additional Changes
Changeset
Test Plan